﻿<template>
  <base-drawer v-model="visible" title="查看订单进度" :size="drawerWidthPx">
    <div class="steps-container">
      <el-steps direction="vertical" :active="activeIndex" class="custom-steps">
        <el-step
          v-for="(item, idx) in steps"
          :key="idx"
          :status="'success'"
          :class="['custom-step', { 'is-latest': idx === 0 }]"
        >
          <template #icon>
            <div v-if="idx === 0" class="dot-latest"></div>
            <div v-else class="dot-done">
              <base-icon :size="14" name="iconfont-general gen-duigou" color="var(--bd)" />
            </div>
          </template>
          <template #title>
            <div class="step-title">{{ item.title }}</div>
          </template>
          <template #description>
            <div class="step-desc">
              <div class="assist-text">{{ item.assist }}</div>
              <!-- 左侧时间块，放在 main 容器内，绝对定位到左侧 -->
              <div class="step-time">
                <div class="date">{{ item.date }}</div>
                <div class="time">{{ item.time }}</div>
              </div>
            </div>
          </template>
        </el-step>
      </el-steps>
    </div>
  </base-drawer>
</template>
<script setup>
  import { computed } from "vue";
  const props = defineProps({
    modelValue: { type: Boolean, default: false },
    drawerWidth: { type: [String, Number], default: 600 },
    steps: {
      type: Array,
      default: () => [
        { date: "2025-09-22", time: "20:08:12", title: "订单完结", assist: "这是描述文案" },
        {
          date: "2025-09-22",
          time: "20:08:12",
          title: "平台结算",
          assist:
            "代扣申请发起失败(非常抱歉！目前该银行正在维护中，请更换其他银行卡支付)代扣申请发起失败(非常抱歉！目前该银行正在维护中，请更换其他银行卡支付)代扣申请发起失败(非常抱歉！目前该银行正在维护中，请更换其他银行卡支付)代扣申请发起失败(非常抱歉！目前该银行正在维护中，请更换其他银行卡支付)代扣申请发起失败(非常抱歉！目前该银行正在维护中，请更换其他银行卡支付)代扣申请发起失败(非常抱歉！目前该银行正在维护中，请更换其他银行卡支付)",
        },
        { date: "2025-09-22", time: "20:08:12", title: "买家归还", assist: "这是描述文案" },
        { date: "2025-09-22", time: "20:08:12", title: "买家归还", assist: "这是描述文案" },
        { date: "2025-09-22", time: "20:08:12", title: "买家归还", assist: "这是描述文案" },
        { date: "2025-09-22", time: "20:08:12", title: "买家归还", assist: "这是描述文案" },
        { date: "2025-09-22", time: "20:08:12", title: "买家归还", assist: "这是描述文案" },
        { date: "2025-09-22", time: "20:08:12", title: "买家归还", assist: "这是描述文案" },
        { date: "2025-09-22", time: "20:08:12", title: "买家归还", assist: "这是描述文案" },
        { date: "2025-09-22", time: "20:08:12", title: "买家归还", assist: "这是描述文案" },
        { date: "2025-09-22", time: "20:08:12", title: "买家归还", assist: "这是描述文案" },
        { date: "2025-09-22", time: "20:08:12", title: "买家归还", assist: "这是描述文案" },
        {
          date: "2025-09-22",
          time: "20:08:12",
          title: "平台结算",
          assist: "代扣申请发起失败(非常抱歉！目前该银行正在维护中，请更换其他银行卡支付)",
        },
        { date: "2025-09-22", time: "20:08:12", title: "买家归还", assist: "这是描述文案" },
        { date: "2025-09-22", time: "20:08:12", title: "买家归还", assist: "这是描述文案" },
        { date: "2025-09-22", time: "20:08:12", title: "买家归还", assist: "这是描述文案" },
        { date: "2025-09-22", time: "20:08:12", title: "买家归还", assist: "这是描述文案" },
      ],
    },
    activeIndex: { type: Number, default: 999 },
  });
  const emit = defineEmits(["update:modelValue"]);
  const visible = computed({
    get: () => props.modelValue,
    set: v => emit("update:modelValue", v),
  });
  const drawerWidthPx = computed(() =>
    typeof props.drawerWidth === "number" ? `${props.drawerWidth}px` : props.drawerWidth
  );
</script>
<style lang="scss" scoped>
  :deep(.el-step__main) {
    padding-left: 12px !important;
  }
  :deep(.custom-steps.el-steps--vertical) {
    position: relative;
    /* 往右侧内缩，让左侧留出放时间的空间 */
    margin-left: 73px;
    overflow: visible; /* 允许左侧时间块显示出容器 */
  }

  /* 每个 step 行设置相对定位，方便把时间块绝对定位到左侧 */
  :deep(.custom-steps .el-step.is-vertical) {
    position: relative;
    min-height: 100px;
    overflow: visible;
  }

  /* 左侧时间块样式 */
  :deep(.custom-steps .el-step.is-vertical) .step-time {
    position: absolute;
    left: -73px; /* 与上面的 margin-left 对应 */
    top: 0;
    color: var(--ct3);
    font-size: 12px;
    text-align: right;
  }
  :deep(.custom-steps .el-step.is-vertical) .step-time .date {
    color: var(--ct3);
  }

  /* 标题与描述 */
  :deep(.custom-steps .step-title) {
    color: var(--ct1);
    font-size: 14px;
  }
  :deep(.custom-steps .is-latest .step-title) {
    font-weight: 500;
    font-size: 14px;
  }
  :deep(.el-step.is-vertical .el-step__title) {
    padding-bottom: 0px;
  }
  :deep(.custom-steps .step-desc .assist-text) {
    margin-top: 4px;
    color: var(--ct3);
    font-size: 12px;
    white-space: normal;
    word-break: break-word; /* 辅助文案超一行自动换行 */
  }

  /* 仅在垂直方向缩短连线，左右位置保持默认与圆点对齐 */
  :deep(.custom-steps.el-steps--vertical .el-step__line) {
    top: 30px;
    bottom: 8px;
    left: 12px;
    right: auto;
    background-color: var(--bd9);
    height: auto;
  }

  /* 控制圆点尺寸、颜色可按需定制 */
  :deep(.custom-steps .el-step__head.is-success) {
    border-color: var(--bd);
    color: var(--bd);
  }

  /* 最新节点：粗描边空心圆 */
  :deep(.custom-steps .custom-step .dot-latest) {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 8px solid var(--bd);
    background: #fff;
  }
  /* 已完成节点：带边框浅底对勾 */
  :deep(.custom-steps .custom-step .dot-done) {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1px solid var(--bd8);
    background: var(--bd9);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* 最新节点下面一段线变色 */
  :deep(.custom-steps .custom-step.is-latest .el-step__line) {
    border-color: var(--bd);
    background-color: var(--bd);
  }
  :deep(.el-step__line-inner) {
    border: unset !important;
  }
</style>
